<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="12">
        <!-- 运营人员 -->
        <el-card class="box bluebox">
          <div class="title">日销售统计</div>
          <div class="body">
            <div class="item">
              <div class="content">
                <span class="num"> {{ dayOrderCount }} </span>
                <span class="declare">当日销售量（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num"> {{ dayOrderAmount }} </span>
                <span class="declare">当日销售额（元）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num"> {{ dayBill }} </span>
                <span class="declare">当日分成（元）</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <!-- 运维人员 -->
        <el-card class="box redbox">
          <div class="title">月销售统计</div>
          <div class="body">
            <div class="item">
              <div class="content">
                <span class="num redNum"> {{ monthOrderCount }} </span>
                <span class="declare resDeclare">当月销售量（个）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num redNum">
                  {{ monthOrderAmount }}
                </span>
                <span class="declare resDeclare">当前销售额（万元）</span>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <span class="num redNum">
                  {{ monthBill }}
                </span>
                <span class="declare resDeclare">当月分成（元）</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="part">
        <div class="search">
          <el-form :inline="true">
            <el-form-item label="合作商：">
              <el-select placeholder="请选择" clearable v-model="partnerName">
                <el-option
                  v-for="item in partnerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期：">
              <el-date-picker
                v-model="duration"
                type="daterange"
                :clearable="false"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn" @click="searchFn"
                ><i class="el-icon-search"></i>查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="resStatic">
          <div class="detail">
            笔数统计：<span>{{ resOrderCount }}</span
            >个
          </div>
          <div class="detail">
            收入统计：<span>{{ resOrderAmount }}</span
            >元
          </div>
          <div class="detail">
            分成统计：<span>{{ resBill }}</span
            >元
          </div>
        </div>
        <div class="resTable">
          <el-table :data="collectList" style="width: 100%">
            <el-table-column prop="date" label="订单日期"> </el-table-column>
            <el-table-column prop="ownerName" label="合作商"></el-table-column>
            <el-table-column prop="ratio" label="分成比例"></el-table-column>
            <el-table-column
              prop="orderTotalMoney"
              label="收入(元)"
            ></el-table-column>
            <el-table-column prop="orderCount" label="笔数"></el-table-column>
            <el-table-column
              prop="totalBill"
              label="分成金额(元)"
            ></el-table-column>
          </el-table>
        </div>
        <!-- <div class="resPage">
          <span
            >共{{ totalCount }}条记录 第{{ pageInfo.pageIndex }}/{{
              totalPage
            }}页</span
          >
          <el-button-group>
            <el-button
              :disabled="pageInfo.pageIndex === 1"
              @click="changePage(-1)"
              >上一页</el-button
            >
            <el-button
              :disabled="pageInfo.pageIndex === Number(totalPage)"
              @click="changePage(1)"
              >下一页</el-button
            >
          </el-button-group>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getOrderCount, getOrderAmount } from '@/api/dashboard'
import {
  getTotalBill, searchPartner, getPartnerCollect,
  getOrderCountById, getOrderAmountById, getTotalBillById
} from '@/api/reportdz'
export default {
  data () {
    return {
      dayOrderCount: 0, // 当日销售量
      monthOrderCount: 0, // 当月销售量
      dayOrderAmount: 0, // 当日销售额
      monthOrderAmount: 0, // 当月销售额
      dayBill: 0, // 当日分成总数
      monthBill: 0, // 当月分成总数
      partnerList: [],
      partnerName: '',
      duration: [],
      pageInfo: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '',
      totalPage: '',
      collectList: [],
      resOrderCount: 0, // 查询结果销售量
      resOrderAmount: 0, // 查询结果销售额
      resBill: 0 // 查询结果分成总数
    }
  },
  async created () {
    // console.log(dayjs('2000-01-02').format('YYYY-MM-DD HH:mm:ss'))
    // 获取销售量
    this.dayOrderCount = await getOrderCount(this.todayStart, this.todayEnd)
    this.monthOrderCount = await getOrderCount(this.monthStart, this.todayEnd)
    // 获取销售额
    this.dayOrderAmount = await getOrderAmount(this.todayStart, this.todayEnd)
    this.monthOrderAmount = (
      (await getOrderAmount(this.monthStart, this.todayEnd)) / 1000000
    ).toFixed(2)
    if (this.monthOrderAmount === '0.00') this.monthOrderAmount = 0
    // 获取分成总数
    this.dayBill = await getTotalBill(this.todayStart, this.todayEnd)
    this.monthBill = (
      (await getTotalBill(this.monthStart, this.todayEnd)) / 100
    ).toFixed(2)
    if (this.monthBill === '0.00') this.monthBill = 0
    // 获取合作商列表
    const { currentPageRecords } = await searchPartner()
    this.partnerList = currentPageRecords
    // 初始化日期选择器
    this.duration = [this.month, this.today]
    // 查询分成汇总
    this.searchFn()
  },
  methods: {
    async searchFn () {
      // 01查询销售量,销售额,分成
      const speStart = dayjs(this.duration[0])
        .startOf('date')
        .format('YYYY-MM-DD HH:mm:ss')
      const speEnd = dayjs(this.duration[1])
        .endOf('date')
        .format('YYYY-MM-DD HH:mm:ss')
      if (this.partnerName) {
        // 搜索合作商
        const res = this.partnerList.find(item => item.name === this.partnerName)
        const id = res.id
        this.resOrderCount = await getOrderCountById(speStart, speEnd, id)
        this.resOrderAmount = ((await getOrderAmountById(speStart, speEnd, id)) / 100).toFixed(2)
        this.resBill = ((await getTotalBillById(speStart, speEnd, id)) / 100).toFixed(2)
      } else {
        this.resOrderCount = await getOrderCount(speStart, speEnd)
        this.resOrderAmount = ((await getOrderAmount(speStart, speEnd)) / 100).toFixed(2)
        this.resBill = ((await getTotalBill(speStart, speEnd)) / 100).toFixed(2)
      }
      if (this.resOrderAmount === '0.00') this.resOrderAmount = 0
      if (this.resBill === '0.00') this.resBill = 0
      // 02查询分成汇总
      this.getcollectList()
    },
    async getcollectList () {
      if (this.partnerName) {
        // console.log('搜索合作商')
        const {
          currentPageRecords: collect,
          totalPage,
          totalCount
        } = await getPartnerCollect({
          ...this.pageInfo,
          start: this.duration[0],
          end: this.duration[1],
          partnerName: this.partnerName
        })
        this.collectList = collect
        this.totalPage = totalPage
        this.totalCount = totalCount
      } else {
        // console.log('搜所有')
        const {
          currentPageRecords: collect,
          totalPage,
          totalCount
        } = await getPartnerCollect({
          ...this.pageInfo,
          start: this.duration[0],
          end: this.duration[1]
        })
        this.collectList = collect
        this.totalPage = totalPage
        this.totalCount = totalCount
      }
      // 0202处理collect数据
      this.collectList.forEach((item) => {
        item.ratio = item.ratio + '%'
        item.orderTotalMoney =
          item.orderTotalMoney > 0
            ? '+' + (item.orderTotalMoney / 100).toFixed(2)
            : (item.orderTotalMoney / 100).toFixed(2)
        item.totalBill =
          item.totalBill > 0
            ? '+' + (item.totalBill / 100).toFixed(2)
            : (item.orderTotalMoney / 100).toFixed(2)
      })
    }
    // changePage (num) {
    //   this.pageInfo.pageIndex += num
    //   this.getCollectList()
    // }
  },
  computed: {
    todayStart () {
      return dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss')
    }, // 2022-11-24 00:00:00},
    todayEnd () {
      return dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')
    }, // 2022-11-24 23:59:59}
    monthStart () {
      return dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    today () {
      return dayjs().format('YYYY-MM-DD')
    },
    month () {
      return dayjs().startOf('month').format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  border-radius: 20px;
  background-color: #fff;
  padding: 20px;
}
.bluebox {
  background-color: #e9f3ff;
  background-image: url(),
    url("https://likede2-admin.itheima.net/img/day.4272ef60.png");

  // background-image: url(),url(../img/day.4272ef60.png);

  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
}
.redbox {
  background-color: #fbefe8;
  background-image: url("https://likede2-admin.itheima.net/img/month.5c71f45f.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 100%;
}
.title {
  font-size: 16px;
  // font-weight: 600;
  color: #333;
}
.el-card {
  padding: 0;
  .body {
    display: flex;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 108px;
      .content {
        display: flex;
        flex-direction: column;
        width: 110px;
        height: 70px;
        margin: auto;
        .declare {
          font-size: 12px;
          font-weight: normal;
          color: #91a7dc;
        }
        .num {
          font-size: 36px;
          font-weight: 600;
          color: #072074;
          text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
          margin-bottom: 5px;
        }
        .resDeclare {
          color: #de9690;
        }
        .redNum {
          color: #ff5757;
          text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
        }
      }
    }
  }
}
.part {
  background-color: #fff;
  .search {
    height: 64px;
    padding-left: 17px;
    padding-top: 15px;
  }
  .resStatic {
    display: flex;
    padding: 10px 0 0 18px;
    .detail {
      margin-right: 50px;
      font-size: 14px;
      color: #333;
      span {
        font-size: 20px;
        color: #ff5757;
        font-weight: 500;
        padding: 0 10px;
      }
    }
  }
  .resTable {
    padding: 20px 15px 19px 17px;
    ::v-deep th {
      background-color: rgb(243, 246, 251);
      color: #666;
      font-size: 14px;
      font-weight: normal;
    }
    ::v-deep .el-table__cell {
      height: 44px;
      padding: 0;
      border: 0;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border: 0px;
    }
    .el-link {
      margin-right: 20px;
    }
  }
  .resPage {
    display: flex;
    justify-content: space-between;
    margin: 32px 16px;
    span {
      font-size: 16px;
      color: #dbdfe5;
    }
    .el-button {
      width: 70px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      margin: 0 16px;
      border-radius: 2px;
      background-color: #d5ddf8;
      font-size: 13px;
    }
  }
}
</style>
